<template>
  <page-scroll :footer="false">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle :title="title" :is_name="true" :is_back="true" :is_lang="false" :is_kf="false"></gltitle>
    </template>
    <template #content>

      <div class="video-content" v-if="showCon">
      <videom3u8 :videoPic="videoPic" :playerOptions="playerOptions" />
      <div class="container">
        <div class="he">
          <div class="flexs">
            {{ datas.name }}
          </div>

          <div class="str">
            <div @click="path_urls('/income/index')" class="btn esoring">{{ $t('page3.doc69') }}</div>
          </div>
        </div>

        <ul class="body">
          <li>
            <div class="n">
              {{ $t('page.doc117') }}：
            </div>
            <div class="flex1">
              {{ datas.type }}
            </div>
          </li>
          <li>
            <div class="n">
              {{ $t('page.doc118') }}：
            </div>
            <div class="flex1">
              {{ datas.director }}
            </div>
          </li>
          <li>
            <div class="n" style="line-height: 22px">
              {{ $t('page.doc119') }}：
            </div>
            <div class="flex1" style="line-height: 22px" v-html="datas.summary">
            </div>
          </li>

        </ul>

        <!-- <video :src="datas.url"
             playsinline
             webkit-playsinline="true"
             preload="auto"
             controls
             ref="myVideo" style="display:none"
             v-if="showVideo"
      ></video> -->

        <div v-if="datalist.length != 0">
          <div class="title1 flex">
            <img src="@/assets/images/tj.png" alt="">
            {{ $t('page.doc120') }}
          </div>

          <div class="videoList vrdetails">
            <ul class="list">
              <li @click="checkLevel(item)" v-for="(item, k) in datalist" :key="k">
                <div class="pic">
                  <img v-lazy="item.coverUrl"/>
                </div>
                <div class="text-wrapper">
                  <div class="nowrap-1">{{ item.name }}</div>
                  <div class="flex justify-between items-center score">
                    <van-rate v-model="item.score" readonly color="#ffcd1e"/>
                  </div>
                  <div class="flex items-center justify-between score-wrapper">
                    <div class="score">{{ $t('page.score') }} {{ item.score }}</div>
                    <div class="like">
                      <span v-if="!item.hasWatch">{{ $t("page4.doc6") }}</span>
                      <span v-else>{{ $t("page.doc4") }}</span>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>


      </div>
    </div>
    </template>
  </page-scroll>
</template>
<script>
import videom3u8 from './videom3u8.vue';
export default {
  components:{
    videom3u8
  },
  data() {
    return {
      title: this.$t('page1.doc42'),
      datas: [],
      id: this.$route.query.id,
      datalist: [],
      isPlay: true,
      isPlay2: true,
      videoPic: '',
      value: 0,
      score: 0,
      userInfoIevel: '', // 用户等级
      showVideo: false,
      videoAuto: false,
      levelData: [],
      showCon:false,
      playerOptions: {

      }
    };
  },
  mounted() {

    // setTimeout(() => {
    //     document.addEventListener("WeixinJSBridgeReady",()=> {
    //         video.play();
    //     }, false);

    //     this.$refs.myVideo.addEventListener('play', this.onVideo);
    //     this.$refs.myVideo.addEventListener('pause', this.onPause);

    this.getinfo()
    // },500)

    // this.getuser();
    this.getLevel()
  },
  computed: {
    userData() {
      return this.$store.state.userData;
    },
  },
  methods: {

    checkLevel(item) {
      this.showCon=false;
      this.id=item.movieId;
      this.playerOptions={}
      this.getinfo()
      this.getLevel()
      //this.path_url('/home/vrdetails?id=' + item.movieId, item.movieId)

    },
    getLevel() {
      this.$post(this.URL.wallet.level, {}).then((res) => {
        if (res.code == 0) {
          this.levelData = res.data;
        } else {
          this.$toast(res.message);
        }
      });
    },
    // 返回
    go_back() {
      this.$router.go(-1);
    },
    rateChange() {
      // 限制用户评定的星级，只允许评分3星以上，如果vip用户选择1-3星评分，应该提示给出提示：请评分3星以上
      if (this.value <= 3) {
        this.value = this.score
        this.$toast(this.$t('page3.doc61'))
        return
      }
      this.$post(this.URL.home.movie_like, {
        movieId: this.id,
        score: this.value
      }).then((res) => {
        if (res.code == 0) {
          this.score = this.value
          this.$toast(res.message)
          // this.$toast(this.$t('page3.doc57'))
        } else {
          this.value = this.score
          this.$toast(res.message)
          // this.$toast(this.$t('page3.doc58'))
        }
      });
    },
    getinfo() {
      this.$post(this.URL.home.movie_detail, {
        movieId: this.id
      }).then((res) => {
        if (res.code == 0) {
          this.datas = res.data
          this.score = res.data.score
          this.value = this.score;
          this.showCon=true;
          //this.showVideo=true;
          //this.$refs.myVideo.src = res.data.url;

          if (res.data.coverUrl == '') {
            this.videoPic = require('../../assets/images/none1.png')
          } else {
            this.videoPic = res.data.coverUrl
          }
          this.playerOptions = {
            autoplay: false, // 如果true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 导致视频一结束就重新开始。
            preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
            language: 'en_US',
            aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
            width: '100%',
            sources: [
              {
                src: res.data.url
              }
            ],
            poster: "", // 封面地址
            notSupportedMessage: this.$t('new.doc52'), //允许覆盖Video.js无法播放媒体源时显示的默认信息。
            controlBar: {
              timeDivider: true,           // 当前时间和持续时间的分隔符
              durationDisplay: true,       // 显示持续时间
              remainingTimeDisplay: false, // 是否显示剩余时间功能
              fullscreenToggle: true
            }
          }
          // this.playerOptions.src = res.data.url;
          this.getlist()
        } else {
          this.$toast(res.message);
        }
      });
      this.$post(this.URL.home.movie_watch, {
        movieId: this.id
      }).then((res) => {
        if (res.code == 0) {
        } else {
          this.$toast(res.message);
        }
      });

    },
    // 用户信息
    getuser() {
      this.$post(this.URL.member.personal, {
      }).then((res) => {
        if (res.code == 0) {
          this.userInfo = res.data
          if (res.data) {
            this.userInfoIevel = res.data.level
          }
        } else {
        }
      });
    },



    getlist() {

      this.$post(this.URL.home.movie_list2, {
        movieId: this.id,
        random: 1,
        page: this.pageSize,
        pageSize: 9
      }).then((res) => {
        if (res.code == 0) {
          this.datalist = res.data

        } else {
          this.$toast(res.message);
        }
      });
    },


    getLike() {
      if (this.datas.like) {
        return
      }
      this.$post(this.URL.home.movie_like, {
        movieId: this.id,
        score: 5
      }).then((res) => {
        if (res.code == 0) {
          this.datas.like = !this.datas.like
        } else {
          this.$toast(res.message);
        }
      });
    },

    path_url(url, id) {
      this.id = id
      this.getinfo()
      // this.onVideo()
      this.isPlay = true
      this.isPlay2 = true
      this.$router.replace({
        path: url,
        query: {
        }
      });
    },
    path_urls(url) {
      this.$router.replace({
        path: url,
        query: {
        }
      });
    },
  },
};
</script>



<style lang="less" scoped>
/deep/ .content-container {
  padding-top: 0 !important;
}

/deep/ .head {
  background: transparent !important;
}

.page {
  padding-top: 20px;
  background: #081715 url("../../assets/images/invest/movice-bg.png") no-repeat top center;
  background-size: 100% !important;
  min-height: 100vh;
}

.video {
  height: 256px;
  > img {
    width: 100%;
    height: 100%;
    z-index: 2;
    object-fit: cover;
  }
  video {
    width: 100%;
    background: #000;
  }
  .play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      height: 1rem;
    }
  }
}

.watch {
  background: linear-gradient(180deg, #FFFB8D 0%, #FF9204 100%) !important;
  color: #000;
  border-radius: .24rem 0 .24rem !important;
}

.he {
  padding: .24rem 0 .32rem 0;

  >.flexs {
    font-size: 0.36rem;
    font-weight: 600;
    margin-bottom: .24rem;
    line-height: 1.4;
  }

  .str {}
}

.body {
  li {
    display: flex;
    font-size: 0.28rem;
    margin-bottom: .14rem;

    .n {
      color: #fff;
    }
  }
}


.title1 {
  font-size: 0.32rem;
  font-weight: 600;
  padding: .4rem 0 .2rem 0;
  display: flex;
  align-items: center;

  img {
    margin-right: .12rem;
    height: 0.32rem;
  }
}

.esoring {
  font-size: .28rem;
  border-radius: 0;
  height: 0.8rem;
  width: 100%;
  text-align: center;
  line-height: 0.8rem;
  background: url("../../assets/images/public/button.png") no-repeat;
  background-size: 100% 100%;
  color: #06CE64;
}

.btn1 {
  background: url("../../assets/images/public/button.png") no-repeat;
  background-size: 100% 100%;
  color: #06CE64;
}

.videoList.vrdetails {
  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li {
      width: 48%;
      margin-right: 0rem;
      margin-bottom: 0.24rem;
      border-radius: 0.16rem;
      border: 1px solid rgba(18, 93, 55, .4);
      overflow: hidden;
      position: relative;
      background: #091f1f;
      padding: 8px;
      box-shadow: 2px 6px 6px rgba(0,0,0,.3);

      .nowrap-1 {
        margin-bottom: 8px;
      }

      .text-wrapper {
        margin-top: 8px;
        color: #fff;
      }

      .score-wrapper {
        margin-top: 12px;
        .score {
          color: #06c761;
        }
      }

      .like {
        width: 84px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px 0 8px 0;
        color: #fff;
        background: #02d080;
      }

      .pic {
        position: relative;
        width: 100%;

        img {
          border-radius: 0.16rem 0.16rem 0 0;
          width: 100%;
          height: 170px;
          object-fit: cover;
        }

        .abs {
          bottom: 0;
          left: 0;
          font-size: 0.2rem;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0.16rem;

          .v {
            flex: 1;
            display: flex;
            align-items: center;

            img {
              width: 0.2rem;
              height: 0.2rem;
              margin-right: 0.06rem;
              vertical-align: top;
            }
          }
        }

        .str {
          font-size: 0.24rem;
          position: absolute;
          right: 0;
          bottom: 0;
          background: linear-gradient(270deg,
          #0571fd 0%,
          #7b02fe 100%,
          #7b02fe 100%);
          padding: 0.08rem 0.16rem;
          border-radius: 0.24rem 0rem 0.24rem 0.24rem;

          span {
            line-height: 0.4rem;
            text-align: center;
            display: block;
          }
        }
      }

      button {
        border-radius: 0.8rem;
        background: linear-gradient(90deg, #1b5bff 0%, #c029ff 100%);
        border: 0;
        font-size: 0.24rem;
        color: #fff;
        padding: 0 0.3rem;
        height: 0.48rem;
      }

      .info {
        padding: 0.16rem;

        .title {
          font-size: 0.26rem;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .pingfen {
        margin: 0.12rem 0 0.24rem 0;
        font-size: 0.24rem;
        align-items: center;
      }

      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
